<template>
  <div v-cloak>
    <div :style="{ color: red, fontSize: fSize }">
      <!-- font-size 这样的属性,需要使用驼峰式命名 -->
      <h1>Hello World</h1>
    </div>
    <div :style="[redColor, fontSize]">
      <h1>Hello World</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 对象控制绑定行内样式
      red: "red",
      fSize: 50 + "px",

      //数组控制绑定行内样式
      redColor: {
        color: "green",
      },
      fSize: {
        fontSize: "80px",
      },
    };
  },
  methods: {},
};
</script>

<style></style>
